"use client";

import { useState } from "react";
import Image from "next/image";
import Link from "next/link";
import { ArrowLeft, MessageSquare, ImageIcon } from "lucide-react";
import { AppItem } from "@/app/mockData";
import ChatGPTSimulation from "./ChatGPTSimulation"; 
import StableDiffusionSimulation from "./StableDiffusionSimulation"; // Import the Stable Diffusion simulation component

interface AppDetailClientProps {
  app: AppItem;
}

const AppDetailClient = ({ app }: AppDetailClientProps) => {
  const [activeTab, setActiveTab] = useState<"details" | "appPage">("details");

  const renderTabContent = () => {
    if (activeTab === "details") {
      return (
        <div className="mt-8">
          <h2 className="text-2xl font-semibold text-gray-100 mb-4">应用详情</h2>
          <div className="bg-gray-800 shadow-xl rounded-lg p-6">
            <p className="text-gray-300 whitespace-pre-line leading-relaxed">{app.longDescription || "暂无详细介绍。"}</p>
            <div className="mt-6 pt-6 border-t border-gray-700">
              <h3 className="text-lg font-medium text-gray-200 mb-2">更多信息</h3>
              <dl className="grid grid-cols-1 md:grid-cols-2 gap-x-4 gap-y-4 text-sm">
                <div>
                  <dt className="font-semibold text-gray-400">分类:</dt>
                  <dd className="text-gray-300">{app.category.join(", ")}</dd>
                </div>
                <div>
                  <dt className="font-semibold text-gray-400">标签:</dt>
                  <dd className="text-gray-300">{app.tags.join(", ")}</dd>
                </div>
                <div>
                  <dt className="font-semibold text-gray-400">版本:</dt>
                  <dd className="text-gray-300">{app.version}</dd>
                </div>
                <div>
                  <dt className="font-semibold text-gray-400">更新日期:</dt>
                  <dd className="text-gray-300">{app.updatedAt}</dd>
                </div>
                <div>
                  <dt className="font-semibold text-gray-400">开发者:</dt>
                  <dd className="text-gray-300">{app.developer}</dd>
                </div>
              </dl>
            </div>
          </div>
        </div>
      );
    } else if (activeTab === "appPage") {
      if (app.detailPageType === "chatgpt") {
        return <ChatGPTSimulation app={app} />;
      } else if (app.detailPageType === "stablediffusion") {
        return <StableDiffusionSimulation app={app} />;
      }
      // Fallback if type is not recognized or not implemented yet
      return (
        <div className="mt-8">
          <h2 className="text-2xl font-semibold text-gray-100 mb-4">应用页</h2>
          <div className="bg-gray-800 shadow-xl rounded-lg p-6 min-h-[300px] flex items-center justify-center">
            <p className="text-gray-400 text-lg">“{app.name}”的应用页内容将在此处展示 (类型: {app.detailPageType})。</p>
          </div>
        </div>
      );
    }
    return null;
  };

  return (
    <>
      <div className="md:flex md:items-start md:space-x-8 mb-10">
        <div className="md:w-1/3 mb-6 md:mb-0 flex justify-center">
          <Image
            src={app.imageUrl}
            alt={app.name}
            width={300}
            height={300}
            className="rounded-lg shadow-2xl object-cover aspect-square border-2 border-gray-700"
            priority={true} 
          />
        </div>
        <div className="md:w-2/3">
          <h1 className="text-4xl md:text-5xl font-bold tracking-tight text-transparent bg-clip-text bg-gradient-to-r from-purple-400 via-pink-500 to-red-500 mb-3">{app.name}</h1>
          <p className="text-lg text-gray-300 mb-4">{app.description}</p>
        </div>
      </div>
      
      <div className="mb-6 border-b border-gray-700">
        <nav className="-mb-px flex space-x-8" aria-label="Tabs">
          <button
            onClick={() => setActiveTab("details")}
            className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg transition-colors ${
              activeTab === "details"
                ? "text-indigo-400 border-indigo-500"
                : "text-gray-400 border-transparent hover:text-gray-200 hover:border-gray-500"
            }`}
          >
            <MessageSquare className="inline-block mr-2 h-5 w-5 align-text-bottom" />
            详情
          </button>
          <button
            onClick={() => setActiveTab("appPage")}
            className={`whitespace-nowrap py-4 px-1 border-b-2 font-medium text-lg transition-colors ${
              activeTab === "appPage"
                ? "text-indigo-400 border-indigo-500"
                : "text-gray-400 border-transparent hover:text-gray-200 hover:border-gray-500"
            }`}
          >
            <ImageIcon className="inline-block mr-2 h-5 w-5 align-text-bottom" />
            应用页
          </button>
        </nav>
      </div>

      {renderTabContent()}
    </>
  );
};

export default AppDetailClient;

